<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>旋转</title>
    <style>
      /* 移动盒子的位置： 定位 盒子的外边距  2d转换移动*/
      .temp1_1,
      .temp1_2 {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* transform: translate(100px, 100px); */
        /* transform: translate(100px, 0); */
        /* transform: translateX(100px);
        transform: translateY(100px); */
      }
      .temp1_1 {
        transform: translate(30px, 30px);
      }
      .temp1_2 {
        background-color: red;
      }

      .temp2 {
        width: 100px;
        height: 100px;
        background-color: red;
        /* 若里面的参数是 % 移动的距离是 盒子自身的宽度或高度来对比的 */
        transform: translate(50%);
      }
      /* 水平垂直居中 */
      .temp2_1 {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: aqua;
      }
      p {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 200px;
        height: 200px;
        background-color: purple;
        /* margin-top: -100px;
        margin-left: -100px; */
        transform: translate(-50%, -50%);
      }

      /* 旋转 */
      img {
        width: 200px;
        height: 200px;
        transform: rotate(45deg);
        border-radius: 50%;
        border: 5px solid red;
        /* 过渡 */
        transition: all 0.6s;
      }
      img:hover {
        transform: rotate(360deg);
      }
      /* 三角 */
      .temp3 {
        position: relative;
        width: 249px;
        height: 35px;
        border: 1px solid #000;
      }
      .temp3::after {
        content: "";
        position: absolute;
        top: 8px;
        right: 15px;
        width: 10px;
        height: 10px;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
        transform: rotate(45deg);
        transition: all 0.6s;
      }
      /* 鼠标经过盒子，里面的三角旋转 */
      .temp3:hover::after {
        transform: rotate(225deg);
        top: 12px;
      }

      .temp4 {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 100px auto;
        transition: all 1s;
        /* transform-origin: left bottom; */
        transform-origin: 50px 50px;
      }
      .temp4:hover {
        transform: rotate(360deg);
      }

      .temp5 {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all 1s;
      }
      .temp5:hover {
        /* transform: scale(2, 2); */
        transform: scale(0.5);
      }

      .temp6 {
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin: 10px;
        transition: all 0.5s;
      }
      .temp6:hover {
        transform: translate(150px, 50px) rotate(180deg) scale(1.2);
      }

      .temp7 {
        width: 200px;
        height: 200px;
        margin: 100px;
        background-color: plum;
        /* transform: skew(20deg, 30deg); */
        /* transform: skewX(20deg); */
        transform: skewY(30deg);
      }

      .temp8 {
        width: 200px;
        height: 200px;
        margin: 100px;
        background-color: plum;
        transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
      }
    </style>
  </head>
  <body>
    <!-- 
      2D转换之移动 translate
        语法：
        transform:translate(x,y); x就是x轴上移动的位置，y就是y轴上移动的位置
        或者分开写
        transform:translateX(n);
        transform:translateY(n);
        重点：
        定义2D转换的移动，沿着x和y周移动元素
        translate最大的优点是：不会影响到其他元素的位置
        translate中的百分比单位是相对于自身元素的盒子的高度或宽度的;
        对行内标签没有效果

       2D旋转之旋转 rotate
       语法：
        transform:rotate(度数);
       重点：
        rotate里面跟度数，单位是deg比如 rotate(45deg)
        角度为正时，顺时针，负时，为逆时针
        默认旋转的中心点是元素的中心点

        2D转换中心点 transform-origin
        语法：
         transform-origin: x y;
        重点：
        注意后面的参数x和y用空格隔开
        x y默认转换的中心点是元素的中心点 (50% 50%)
        还可以给x y设置像素 或者 方向名词 (top bottom left right center)

        2D转换之缩放 scale
        语法：
        transform: scale(x,y);
        注意：
        其中的x和y用逗号隔开
        transform:scale(1,1);宽和高都放大一倍，相对于没有放大
        transform:scale(2,2);宽和高都放大两倍
        transform:scale(2);只写第一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
        transform:scale(0.5,0.5);缩小
        scale缩放最大的优势：可以设置中心点的缩放，默认以中心点缩放的，而且不影响其他盒子

        2D转换综合写法
        注意：
        1.同时使用多个转换，其格式为：transform:translate() rotate() scale() ...等
        2.其顺序会影响转换的效果。(先旋转会改变坐标轴方向)
        3.当我们同时有位移和其他属性的时候，记得要将位移放在最前面

        skew() 方法
        transform:skew(<angle> [,<angle>]);
        包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
        skewX(<angle>);表示只在X轴(水平方向)倾斜。
        skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

        matrix() 方法
        matrix()方法和2D变换方法合并成一个。
        matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

     -->

    <!-- <`1div class="temp1_1"></>
    <div class="temp1_2"></div> -->

    <!-- <div class="temp2"></div> -->
    <!-- 水平垂直居中对齐 -->
    <!-- <div class="temp2_1">
      <p></p>
    </div> -->

    <!-- <img src="../image/image1.00.webp" alt="" />

    <div class="temp3"></div> -->

    <!-- <div class="temp4"></div> -->

    <!-- <div class="temp5"></div> -->

    <!-- <div class="temp6"></div> -->

    <!-- <div class="temp7"></div> -->

    <div class="temp8"></div>
  </body>
</html>
